<template>
    <div class="searchList" ref="searchlist">
        <div class="searchBox">
            <van-icon name="arrow-left" class="icon" />
            <input type="text" v-model="searchData.query" @change="search()">
            <van-icon name="search"  class="icon" @click="search()" />
        </div>
        <div class="searchCon">
            <div class="item"
             @click="showOptions=!showOptions;" 
             :class="{'active':searchData.main_sort===4||searchData.main_sort===0}">
                <span v-if="searchData.main_sort===4">新品</span>
                <span v-else>综合</span>
            </div>
            <div class="item" 
            :class="{'active':searchData.main_sort===1}"
            @click="searchData.main_sort=1;searchData.page_index=1;search()">
                销量
            </div>
            <div class="item price" 
            :class="{'active':searchData.main_sort===2}"
            @click="priceClick()">
                <span>价格</span> 
                <span class="arrow">
                    <span class="up" :class="{ 'sel':searchData.sort_by=='dsc'}"></span>
                    <span class="down" :class="{ 'sel':searchData.sort_by=='asc'}"></span>
                </span>
            </div>
            <div class="item">
                筛选
            </div>
            <div class="options" v-show="showOptions">
                <div class="option" 
                :class="{'active':searchData.main_sort===0}"
                @click="showOptions = false;searchData.main_sort=0;search()">综合排序</div>
                <div class="option"
                :class="{'active':searchData.main_sort===4}"
                 @click="showOptions = false;searchData.main_sort=4;search()">新品优先</div>
            </div>
        </div>
        <div v-if="list_v2.length">
            <ListV2
             :item="item"
             v-for="item in list_v2" :key="item.product_id"></ListV2>
        </div>
        <van-empty v-else image="search" description="没有搜索到商品" />
    </div>
</template>
<script>
    // 02 导入api
    // 导入组件
   import ListV2  from '@/components/ListV2.vue'
   import {Search} from '@/api/mi.js'
   export default {
        components:{ListV2},
        data(){
            return  {
                // 03搜索条件（网络请求的载荷）
                // 接口文档（get ：请求参数params）
                // （post：请求体body）
                searchData:{
                    client_id: 180100031051,
                    channel_id:"",
                    webp: 1,
                    query:"电视",
                    version: 2,
                    page_index:1,
                    page_size:20,
                    main_sort:2,
                    activity_id: "",
                    activity_type: '',
                    sort_by: "dsc",                   
                    filter_tag: 0
                },
                showOptions:false,//选项的显示与隐藏
                list_v2:[],//渲染的列表
                canLoad:true,//默认可以加载
            }
        },
        created(){
            // 05 在生命周期中更新搜索条件，并执行搜索方法
            this.searchData.query = this.$route.query.key||"";
            this.search();
        },
        methods:{
            // 04 定义方法
            search(type=1){
                if(type==1){
                    //如果是点击事件，change事件改变的默认都是type值为1 把页面数据page_index改为1
                    this.searchData.page_index= 1;
                }
                // 执行search就不能执行第二遍search
                this.canLoad = false;
                Search(this.searchData)
                .then(res=>{
                    // search数据请求完毕，可以执行第二次search
                    this.canLoad = true;
                    console.log("搜索后的数据",res.data)
                    // 更新列表list_v2
                    //如果类型type值是默认的1直接替换数据
                    if(type==1){
                        this.list_v2 = res.data.data.list_v2;  
                    }else{
                        // 如果type值不是1就让数组相加
                        this.list_v2 =  this.list_v2.concat(res.data.data.list_v2)
                    }
                   
                })
                .catch(()=>{
                    // search数据请求失败，可以执行第二次search
                    this.canLoad = true;
                })
            },
            // 价格被单击
            priceClick(){
                // 改变main_sort
               
                this.searchData.main_sort=2;
                if(  this.searchData.sort_by=='asc'){
                    // 如果原来是asc现在是dsc
                    this.searchData.sort_by="dsc"
                }else{
                    this.searchData.sort_by="asc"
                }
                // 执行搜索
                this.search();
            },
            checkScroll(){
                //拿到最后一个元素
                var last = this.$refs.searchlist.querySelector(".list_v2:last-child");
               //获取元素的边界的top值
                var top = last.getBoundingClientRect().top;
                var winH = window.innerHeight;
                // 元素距离可视区域顶部的高度小于浏览器可视区域的高并且canLoad为true
                if(top<winH&&this.canLoad){
                    console.log("加载第2页数据")
                    //  page_index:1,++
                    this.searchData.page_index++;
                    // 执行search
                    this.search(2)
                    //执行次数太多？如果新数据没有出来就不让加载更多
                }
            }
        },
        mounted(){
            //监听
            this.$refs.searchlist.addEventListener("scroll",this.checkScroll);
        },
        beforeDestroy(){
            // 移除监听
            this.$refs.searchlist.removeEventListener("scroll",this.checkScroll);
        }
   }
</script>
<style lang="scss" scoped>
    .searchList{
        overflow: auto;
        // border:1px solid red;
        //一定要确保滚动的元素就是监听的元素
        // elem.scrollTop 发生变化
    }
    .price{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .down{
        display: block;
        content:'';
        width:0;
        border: 5px solid transparent;
        border-top-color:#999;
        margin-left: 3px;
    }

    .up{
        display: block;
        content:'';
        width:0;
        border: 5px solid transparent;
        border-bottom-color:#999;
        margin-bottom: 3px;
        margin-left: 3px;
    }
    .active .sel.up{
        border-bottom-color:#f70 !important;
    }
    .active .sel.down{
        border-top-color:#f70 !important;
    }
    .active{color:#f70 !important}
    .searchCon{
        line-height: .88rem;
        height: .88rem;
        display: flex;
        background-color: #fafafa;
        align-items: center;
        position: relative;
        .item{
            flex:1;
            text-align: center;
        }
        .options{
            position: fixed;
            left:0;
            top:1.76rem;
            width:100%;
            bottom:0;
            background-color: rgba(0,0,0,.3);
            .option{
                height: .88rem;
                background-color: #fff;
                padding: 0 .15rem;
            }
            
            
        }
    }

    .searchBox{
        line-height: .88rem;
        height: .88rem;
        display: flex;
        background-color: #fafafa;
        align-items: center;
        .icon{
            width:.88rem;
            height: .88rem;
            line-height: .88rem;
            text-align: center;
            font-size: .3rem;
        }
        input{
            flex:1;
            height: .6rem;
            line-height: .6rem;
            background-color: #fff;
            padding: 0 5px;
            border: none;
        }
    }
</style>